<template>
    <item-music-top :playlist="state.playlist"></item-music-top>
    <item-music-list
        :itemList="state.itemList"
        :subscribedCount="state.playlist.subscribedCount"
    ></item-music-list>
</template>
<script>
import { useRoute } from "vue-router";
import { onMounted, reactive } from "vue";
import { getMusicItemList, getItemList } from "../components/request/api/item";
import ItemMusicTop from "../components/item/ItemMusicTop";
import ItemMusicList from "@/components/item/ItemMusicList";
export default {
    components: { ItemMusicTop, ItemMusicList },
    setup() {
        const state = reactive({
            playlist: {}, //歌单的详情页数据
            itemList: [], //歌单的歌曲
        });
        onMounted(async () => {
            let id = useRoute().query.id;
            console.log(id);
            //获取歌单详情
            let res = await getMusicItemList(id);
            console.log(res);
            state.playlist = res.data.playlist;
            //获取歌单的歌曲
            let result = await getItemList(id);
            console.log(result);
            state.itemList = result.data.songs;
            //防止页面刷新数据丢失，将数据保存到sessionStorage中
            sessionStorage.setItem("itemDetail", JSON.stringify(state));
        });

        return { state };
    },
};
</script> 